<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{msg}}</h2>
    <p>{{say()}}</p>
    <p>{{say2()}}</p>
    <p>{{say3()}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hi vue'
      },
      // methods选项，定义函数的位置，它指定对象
      // 可以定义多个函数，属性对应函数。
      methods: {
        // vue实例可以调用这个函数 vm.say()
        // 在模板但是也可以使用这个函数，直接使用函数名称调用即可 say()，函数的返回值会输出在视图中
        // 在函数中的 this 就是vue实例，也就是vm，所以就可以访问数据
        // 写法1：传统写法
        say: function () {
          console.log('ok')
          return '你好' + this.msg
        },
        // 写法2: 属性简写
        say2 () {
          return '你好2' + this.msg
        },
        // 写法3：箭头函数
        say3: ()=>{
          // 箭头函数没有this,也就是访问不到vue实例，操作不了数据。
          // 建议：在methods中尽量不使用箭头函数，因为经常会使用vue实例
          return '你好3' + this.msg
        }
      }
    })
  </script>
</body>
</html>